<template>
  <div class="roomGeneralViewDetail" v-loading="loading">
    <el-row class="roomGeneralViewDetail-a">
      <el-col :span="12">
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.alarmTimeSet}}</span>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.startTimeSecond}}</el-col>
          <el-col :span="12">
            <el-input
              v-model.number="silentTime"
              prefix-icon="el-icon-time"
              class="startTimeSecond"
              maxlength="3"
              :readonly="silentStatus"
            ></el-input>
            <span style="margin-right:5px;">{{roomGeneralViewManagement.minute}}</span>
            <kt-button
              class="btn0 boxShadowButton"
              :label="roomGeneralViewManagement.search"
              :disabled="disabledSetAlarmTime"
              @click="handleSetAlarmTime"
            />
          </el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            v-if="silentStatus==false"
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.alarmoff}}</el-col>
          <el-col
            v-else
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.alarmOn}}</el-col>
          <el-col :span="12">
            <el-switch
              v-model="silentStatus"
              @change="changeSwitch"
              active-color="#13ce66"
              inactive-color="#ccc"
            ></el-switch>
          </el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.baseInfo}}</span>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.roomNo}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.roomNo}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.resident}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.oldName}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.roomTemperatureState}}</span>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.roomTemperature}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.temperature}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.vitalSigns}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.inBed}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.inBed}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.heartState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.heartbeat}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.breathState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.breath}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row style="margin-top:10px;" class="moHu">
          <div style="width:100%;height:420px" :class="filterBlur">
            <!-- 视频模块 -->
            <img
              v-if="videoFlag==false && picture==''"
              :src="image.shexiangtou"
              alt
              class="roomGeneralViewDetail-a-res"
            />
            <img
              v-if="videoFlag==false && picture!=''"
              :src="picture"
              alt
              class="roomGeneralViewDetail-a-res"
            />
            <!-- <div class="Ckplayer" v-if="videoFlag==true">
              <div id="video" ref="video_ck"></div>
            </div>-->
            <video v-if="videoFlag==true" id="remoteVideo" ref="remoteVideo" class="remotevideo" 
                style="object-fit:fill;height: 420px" muted preload="auto" autoplay="autoplay" x-webkit-airplay="true" 
                playsinline ="true" webkit-playsinline ="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" 
                x5-video-orientation="portraint">
            </video>
          </div>
          <div class="arc" v-if="videoShowLoadding"></div>
          <!-- 1.实时视频 isLivePlay 播放/暂停 -->
          <!-- v-if="!isLivePlay && !videoShowLoadding && isVideoPlay" -->
          <i @click="handleUrgencySure"
             v-if="deviceNo!='' && isLivePlay"
             :style="videoFlag==false?'bottom: -10px':''"
             :class="isVideoPlay?'el-icon-video-pause':'el-icon-video-play'"
             id="videoPlayPause"/>
          <i v-if="!isLivePlay && showPlayLive"
             @click="handleUrgencySure"
             style="bottom: -10px;position: absolute;z-index: 10;left: 5px;color: white;height: 50px;caret-color: rgba(0, 0, 0, 0);font-size: 32px;"
             :class="isVideoPlay?'el-icon-video-pause':'el-icon-video-play'"/>
          <!-- <el-slider v-model="seekprogress"
            v-if="!isLivePlay && isVideoPlay"
            style="bottom: 7px;position: absolute;width: 88%;left:6%"></el-slider> -->
          <i
            @click="videoSmBig"
            v-if="videoFlag==true"
            class="el-icon-full-screen"
            id="videoSmBig"
            :style="alertPlayFlag?'bottom: -10px;':''"
          />
          <!-- class="alarmMessage blink" 去掉动画-->
          <div v-if="videoFlag==true && !alertPlayFlag">
            <div
              :class="`${languageClass ? 'alarmMessageJp' : 'alarmMessage'}`"
            >{{roomGeneralViewManagement.videoAlarmMessage}}</div>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-b height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessage}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span="20">
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValueTable"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.search"
          @click="serachAlarmTable"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-c">
      <el-table
        style="width:100%"
        :data="tableData"
        :border="false"
        :header-cell-style="tableHeaderColor"
        :row-style="tableRowStyle"
        @row-click="handleAlertClick"
      >
        <el-table-column
          prop="createdTime"
          align="center"
          :label="roomGeneralViewManagement.occurrenceTime"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="alertType"
          :formatter="formatAlertType"
          align="center"
          :label="roomGeneralViewManagement.condition"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          align="center"
          :label="roomGeneralViewManagement.acknowledgingTime"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="lastOperator"
          align="center"
          :label="roomGeneralViewManagement.affirmant"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <!-- by guo 2020-03-09-13:51添加  警报录像播放按钮 -->
        <el-table-column :label="roomGeneralViewManagement.opertion" min-width="50" align="center">
          <template slot-scope="scope" v-if="scope.row.alertType==13">
            <img
              class="handedness"
              v-if="alertPlayFlag && scope.row.videoPlayIconShow && isVideoPlay"
              :src="image.life_video_push"
              alt
              @click="alarmVideoPushClick(scope.$index,scope.row)"
            />
            <img
              class="handedness"
              v-else
              :src="image.life_video_play"
              alt
              @click="alarmVideoPlayClick(scope.$index,scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalDataNumber"
        :page-size="pageSize"
        align="center"
        class="fenyeTwo"
      ></el-pagination>
    </el-row>
    <el-row style="margin-top:40px;">
      <kt-button
        v-if="alarmSurefalg"
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
      <kt-button
        v-else
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
    </el-row>
    <el-row class="roomGeneralViewDetail-d height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessageOutput}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span="20">
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValue"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.cSVOutput"
          @click="handleCsvOutput"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-f height40">
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.backList"
          @click="handleBackList"
        />
      </el-col>
      <el-col :span="4" :offset="6">
        <kt-button
          class="btn1 boxShadowButton"
          :label="roomGeneralViewManagement.vitalSignsDetail"
          @click="handleDetail"
        />
      </el-col>
      <el-col :span="4" :offset="6">
      </el-col>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import realVideo from "../../../assets/lifeGroupimg/realVideo.png";
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
import juxing_red from "../../../assets/lifeGroupimg/juxing_red.png";
import shexiangtou from "../../../assets/lifeGroupimg/shexiangtou.png";
import life_video_play from "../../../assets/lifeGroupimg/life_video_play.png";
import life_video_push from "../../../assets/lifeGroupimg/life_video_push.png";
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
import { baseURL } from "../../../api/http.js";
import mqtt from "mqtt"; //导入mqtt
import {
  MQTT_SERVICE,
  MQTT_USERNAME,
  MQTT_PASSWORD,
  MQTT_CLIENTID
} from "../../../api/http.js";
export default {
  name: "RoomGeneralViewDetail",
  data() {
    return {
      roomGeneralViewManagement: this.$t("m.roomGeneralViewManagement"), //引入 lang 里面的字符串资源,
      size: "medium", //按钮的尺寸
      id: "",
      image: {
        realVideo,
        juxing_Small,
        shexiangtou,
        life_video_play,
        life_video_push
      },
      backgroundImage: "",
      disabledSetAlarmTime: false, //报警屏蔽时间的按钮是否可以点击
      readonlySilentTime: false, //是否可读
      silentTime: "", //报警屏蔽时间
      silentStatus: false, //报警设置开关  false---关   true---开
      silentStatusRoom: false, //用来判断房间是否设置了警报屏蔽
      alarmSurefalg: false,
      alertPlayFlag: false,
      seekprogress:0,// 拖动进度条
      cameraInfo: {},
      lifeRoomInfo: {
        roomNo: "",
        oldName: "",
        temperature: "",
        inBed: "",
        heartbeat: "",
        breath: ""
      },
      isVideoPlay: false,
      isLivePlay: true, //是否是实时视频
      showPlayLive:true,
      videoFlag: false, //默认为false 静态图片显示 视频播放隐藏  当点击了紧急按钮之后状态为true 视频播放显示  静态图片隐藏
      videoShowLoadding:false,//loadding
      urgencySureFlag: false, //用于判断实时视频按钮的播放和切换  true--播放   false--停止
      tableData: [],
      timeValueTable: "", //报警列表的查询,时间
      /* 分页的 */
      currentPage: 1, //初始页
      pageNum: 1, //页码
      pageSize: 5, //每页显示的条数
      totalDataNumber: 0, //数据的总数,
      timeValue: "", //报警导出的查询时间
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      bedDeviceNo: "", //床垫的设备编号
      roomId: "",
      deviceNo: "", //摄像头的设备编号
      picture: "",
      alertId: "",
      alertType:'',
      isHandle: "",
      groupId: "",
      filterBlur: "filter-blur0",
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
      flashFlag: true, //flash默认是关闭的--true
      languageClass: true,
      conn: null, //by guo 2020-2-23-16:12添加
      /* ckplayer播放器的配置 */ videoObjectPc: {
        width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有)
        height: 574, // 高度，也可以支持百分比
        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
        autoplay: true, //自动播放
        live: true,
        video: "" //视频地址 rtmp://58.200.131.2:1935/livetv/hunantv
      },
      videoSrc: "", //获取需要播放的url
      options: {
        connectTImeout: 4000, //超时连接的时间
        clientId: MQTT_CLIENTID,
        //clientId: "mqtitId-" + new Date().getTime(),
        //clientId: 'mqtitId-Home',
        username: MQTT_USERNAME,
        password: MQTT_PASSWORD,
        clean: true
      },
      wsuri:'',
      client: "",
      msg: "", //mqtt推送的消息
      timedelay:0,
      serverTimeoutObj: null,
      cameraStatus: "", //摄像头的状态
      alertVideoFlag: "", //报警录像是否存在 true存在  false不存在
      loading: false, //页面加载的loading by guo 2020-3-23-13:55添加
      rowAlartId: "",
      isAndroid:false,
      isIos:false,
      isChrome:false,
      isWeixin:false,
      websock: null,
      showVideo:true,
      connected: false,
			connecting: false,
      videoplaying: false,
      videoplayingArc: false,
			socketTask: false,
			startRecive:false,
			StartCalled:false,
			CheckedgetUserMedia:false,
			IsWebSocketCreateed:false,
      IsWebSocketConnecting:false,
      IsWebSocketOpened:false,
			IsLocalAudioTrack:false,
			IsLocalVideoTrack:false,
			IsSystemAudioDeviceOK:false,
			speak:false,
      mute:false,
			myPeerConnection:null,
			myDataChannel: null,
			stream:null,
			remoteVideo:null,
			heartCheck:null,
			messagecallback :null,
			RTCPeerConnectionCreated : false,
			peerid:'',
			sessionId:'',
			wsurl:'',
			url:'',
      mymsg:false,
			roomId:'',
      IsReconnect:false,
      timeout: 2000,
      timedelay:0,
      serverTimeoutObj: null,
      IceCandidate:new Array(),
			connectmode:"live",
			connectsource:"MainStream",
      configuration:{"iceServers": [{'urls': [ 'stun:stun.l.google.com:19302?transport=udp',]}]}

    };
  },
  methods: {
    /* 
      mqtt 2020-2-28-10:50添加
    */
    mqttMSG() {
      this.client = mqtt.connect(MQTT_SERVICE, this.options);
      // mqtt连接
      this.client.on("connect", e => {
        console.log(e);
        console.log("连接成功:");
        let deviceNo = this.bedDeviceNo; //床垫的设备编号;
        let topic = "FRONT_CLIENT_" + deviceNo; // deviceNo 是守护佳床垫设备编号
        this.client.subscribe(topic, error => {
          console.log(topic, "topic");
          if (!error) {
            console.log("-----------------gzh: 订阅成功");
          } else {
            console.log("-----------------gzh: 订阅失败");
          }
        });
      });
      // 接收消息处理
      this.client.on("message", (topic, message) => {
        this.msg = JSON.parse(message.toString());
        console.log(this.msg);
        if (this.msg.status == "online") {
          //by guo 2020-4-2 16:10修改
          //在离床
          if (this.msg.inBed == 0) {
            this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.inBedZero;
          } else {
            this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.inBedOne;
          }
          //去除心跳为-1和0的数据
          if (this.msg.heartbeat != -1 && this.msg.heartbeat != 0) {
            this.lifeRoomInfo.heartbeat = this.msg.heartbeat;
            console.log("show heartbeat : ",this.lifeRoomInfo.heartbeat);
          } else {
            this.lifeRoomInfo.heartbeat = "--";
          }
          //去除呼吸为-1和0的数据
          if (this.msg.breath != -1 && this.msg.breath != 0) {
            this.lifeRoomInfo.breath = this.msg.breath;
          } else {
            this.lifeRoomInfo.breath = "--";
          }
          // if(this.msg.heartbeat!=-1){//在线 by guo 2020-3-2-21:55添加
          //   this.lifeRoomInfo.heartbeat=this.msg.heartbeat;
          //   this.lifeRoomInfo.inBed=this.roomGeneralViewManagement.inBedOne;
          // }else{
          //   this.lifeRoomInfo.heartbeat='--';
          //   this.lifeRoomInfo.inBed=this.roomGeneralViewManagement.inBedZero;
          // }
          // if(this.msg.breath!=-1){
          //   this.lifeRoomInfo.breath=this.msg.breath;
          // }else{
          //   this.lifeRoomInfo.breath='--';
          // }
        } else {
          //离线 by guo 2020-3-2-21:55添加
          if(this.msg.status == "offline"){
            this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.offline;
          }else{
            this.lifeRoomInfo.inBed = '--'
          }
          this.lifeRoomInfo.heartbeat = "--";
          this.lifeRoomInfo.breath = "--";
        }
      });
      // 断开发起重连
      this.client.on("reconnect", error => {
        console.log("正在重连:", error);
      });
      // 链接异常处理
      this.client.on("error", error => {
        console.log("连接失败:", error);
      });
    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的播放
    */
    alarmVideoPlayClick(index, row) {
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].videoPlayIconShow == true) {
          this.tableData[i].videoPlayIconShow = false;
        }
      }
      this.rowAlartId = row.alertId; //获取点击播放的录像的alertId
      row.videoPlayIconShow = true;
      this.showPlayLive = false;
      this.tableData[index].videoPlayIconShow = true;
      this.alertVideoShow(row);
    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的暂停
    */
    alarmVideoPushClick(index, row) {
      console.log(row);
      console.log(this.tableData);
      this.rowAlartId = row.alertId; //获取点击播放的录像的alertId
      if (row.videoPlayIconShow == true) {
        if(this.remoteVideo!=null){
          this.remoteVideo.pause();
        }
        row.videoPlayIconShow = false;
        this.isLivePlay = false;
        this.isVideoPlay = false;
        this.showPlayLive = true;
      }
    },

    /* 
      1. 通过报警id查询警报录像
    */
    alertVideoShow(row) {
      console.log(row);
      this.$postForm(
        "dmc/camera/alertVideoShowByWebRTC",
        { alertId: row.alertId },
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.cameraInfo = res.result;
          this.videoFlag = true; //点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
          this.videoShowLoadding = true;
          this.urgencySureFlag = true; //by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
          this.alertPlayFlag = true; //报警播放标识符;
          this.isLivePlay = false;
          setTimeout(()=>{
            this.initSkyRtc();
          },50);
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },
    /* 
      查询图片
    */
    getPicture(deviceNo) {
      if (deviceNo != "") {
        let params = new Object();
        params.deviceNo = deviceNo;
        console.log(params);
        this.$postForm(
          this.ports.roomGeneralViewManagement.getPicture,
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res, "查询拍摄的图片");
          if (res.code == 200) {
            if (res.result != null) {
              if (res.result.picture != "") {
                //var backgroundImage=res.result.picture;
                // this.picture='data:image/jpg;base64,'+backgroundImage;
                var backgroundImage = res.result.pictureUrl; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
                this.picture = backgroundImage; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
              } else {
                this.picture = "";
              }
            } else {
              this.picture = "";
            }
          }
        });
      }
    },

    /* 
      设置房间的报警时长
    */
    handleSetAlarmTime() {
      let params = new Object();
      params.roomId = this.roomId * 1;
      params.silentTime = this.silentTime; //报警屏蔽时间
      var res = /^[0-9]{1,7}$/;
      if (this.silentTime === 0) {
        console.log(this.silentStatus, this.silentStatusRoom);
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.roomGeneralViewManagement.numNotZero,
          type: "error"
        });
      } else if (!res.test(this.silentTime)) {
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.roomGeneralViewManagement.numLength3,
          type: "error"
        });
      } else {
        this.$postJson(
          this.ports.roomGeneralViewManagement.roomSilentTime,
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.queryRoomAlartStatus(this.roomId);
            this.$message({ message: res.message, type: "success" });
          } else {
            this.$message({ message: res.message, type: "error" });
          }
        });
      }
    },

    /* 
      设置报警屏蔽的开关
    */
    roomAlertStatus() {
      let params = new Object();
      params.roomId = this.roomId * 1;
      params.silentTime = this.silentTime; //报警屏蔽时间
      var res = /^[0-9]{1,7}$/;
      if (this.silentTime === 0) {
        console.log(this.silentStatus, this.silentStatusRoom);
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.roomGeneralViewManagement.numNotZero,
          type: "error"
        });
      } else if (!res.test(this.silentTime)) {
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.roomGeneralViewManagement.numLength3,
          type: "error"
        });
      } else {
        this.$postJson(
          this.ports.roomGeneralViewManagement.roomAlertStatusTwo,
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.queryRoomAlartStatus(this.roomId);
            this.$message({ message: res.message, type: "success" });
          } else {
            this.$message({ message: res.message, type: "error" });
          }
        });
      }
    },

    /* 
      报警屏蔽解除
    */
    deleteRoomAlertStatus() {
      this.$deleteList(
        this.ports.roomGeneralViewManagement.roomAlertStatus + this.roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.queryRoomAlartStatus(this.roomId);
          this.$message({ message: res.message, type: "success" });
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },

    /* 
      查询房间的报警状态
    */
    queryRoomAlartStatus(roomId) {
      this.$getForm(
        this.ports.roomGeneralViewManagement.roomAlertStatus + roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.silentTime = res.result.defaultSilentTime;
          this.silentStatus = res.result.silentStatus == 0 ? false : true;
          this.silentStatusRoom = res.result.silentStatus == 0 ? false : true; //用来判断房间是否设置了警报屏蔽
          if (this.silentStatusRoom == true) {
            this.readonlySilentTime = true;
            this.disabledSetAlarmTime = true;
          } else {
            this.readonlySilentTime = false;
            this.disabledSetAlarmTime = false;
          }
        }
      });
    },

    /* 
      报警开关的change事件
    */
    changeSwitch() {
      console.log(this.silentStatus);
      return this.silentStatus == true
        ? this.roomAlertStatus()
        : this.deleteRoomAlertStatus();
    },

    /* 
      点击报警列表某一行
    */
    handleAlertClick(row, event, column) {
      this.alertId = row.alertId;
      this.isHandle = row.isHandle; //获取报警处理的状态
      this.alertType = row.alertType;

    },

    /* 
      确认完成
    */
    handleSureComplete() {
      // this.videoFlag=false;//点击了确认完成按钮  视频码流播放隐藏  静态图片显示
      //this.initVideo();//by guo 2020-3-22-23-54修改
      if (this.alertId != "") {
        if (this.isHandle == 0) {
          if(this.alertType != 10 && this.alertType != 21 && this.alertType != 22 && this.alertType != 23 && this.alertType != 24 && this.alertType != 27){
            this.updateAlert(this.alertId);
          }else{
            // 自動復旧までおまちください
            this.$message({
            message: this.roomGeneralViewManagement.deviceofflinehandle,
            type: "error"
          });
          }
        } else {
          this.$message({
            message: this.roomGeneralViewManagement.hasdealalarm,
            type: "error"
          });
        }
      } else {
        this.$message({
          message: this.roomGeneralViewManagement.selectAlarmInfo,
          type: "error"
        });
      }
    },

    /* 
      CSV输出
    */
    handleCsvOutput() {
      if (this.tableData.length != 0) {
        let params = new Object();
        params.roomId = this.roomId;
        params.groupId = this.groupId;
        if (this.timeValue != "") {
          params.startTime = this.timeValue[0] + " 00:00:00";
          params.endTime = this.timeValue[1] + " 23:59:59";
        }
        //判断是否传了开始时间和结束时间
        if (this.timeValue != "") {
          window.location.href =
            baseURL +
            this.ports.roomGeneralViewManagement
              .queryDeviceAlertLifeRoomToExcel +
            `?roomId=${params.roomId}&groupId=${params.groupId}&startTime=${params.startTime}&endTime=${params.endTime}`;
        } else {
          window.location.href =
            baseURL +
            this.ports.roomGeneralViewManagement
              .queryDeviceAlertLifeRoomToExcel +
            `?roomId=${params.roomId}&groupId=${params.groupId}`;
        }
      } else {
        this.$message({
          message: this.roomGeneralViewManagement.noAlarmInfo,
          type: "error"
        });
      }
    },

    /* 
      返回列表
    */
    handleBackList() {
      bus.$emit("homePage", {
        type: "remove",
        path: "/RoomGeneralViewDetail",
        showpath: "/RoomGeneralViewManagement"
      });
    },

    /* 
      通过房间id获取设备编号和设备信息
    */
    queryDevice(roomId) {
      console.log(roomId);
      this.$postJson(
        this.ports.roomGeneralViewManagement.queryDevice + roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          if (res.result != null || res.result.length != 0) {
            for (var i = 0; i < res.result.length; i++) {
              if (res.result[i].deviceType == 12) {
                //deviceType==12为摄像头
                this.deviceNo = res.result[i].deviceNo;
                //this.cameraStatus=res.result[i].status;//by guo 2020-2-28-15:03添加 摄像头的状态
              }else if(res.result[i].deviceType==9){//deviceType==9为床垫
                this.bedDeviceId=res.result[i].deviceId;
                this.bedDeviceNo=res.result[i].deviceNo;
                // mqtt获取实时数据需要在订阅的时候提供bedDeviceNo
                this.mqttMSG();
              }
            }
          } else {
            this.deviceNo = "";
            this.bedDeviceId = "";
          }
          console.log(this.deviceNo, this.bedDeviceId);
          this.getPicture(this.deviceNo);
          this.queryLifeRoomInfo(roomId);
        }
      });
    },

    /* 
      根据房间id查询房间的信息
    */
    queryLifeRoomInfo(roomId) {
      this.$postJson(
        this.ports.roomGeneralViewManagement.queryLifeRoomInfo + roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res, "查询房间信息");
        if (res.code == 200) {
          this.lifeRoomInfo.roomNo = res.result[0].roomNo;
          this.lifeRoomInfo.oldName =
            res.result[0].oldName == null ? "--" : res.result[0].oldName;
          this.lifeRoomInfo.temperature =
            res.result[0].temperature == null
              ? "--"
              : res.result[0].temperature;
          //this.lifeRoomInfo.inBed=(res.result[0].inBed==null && this.bedDeviceId!=undefined) ? this.$t("m.roomGeneralViewManagement").offline : ((res.result[0].inBed==null && this.bedDeviceId==undefined) ? '--' : (res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedZero : this.$t("m.roomGeneralViewManagement").inBedOne));
          //by guo 2020-4-24-13:27 修改 添加了inBed=3为床垫离线
          if(res.result[0].inBed == null && this.bedDeviceId != undefined){
             this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.offline;
          }else if(res.result[0].inBed == null && this.bedDeviceId == undefined){
             this.lifeRoomInfo.inBed = "--";
          }else if(res.result[0].inBed == 0){
             this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.inBedZero;
          }else if(res.result[0].inBed == 1){
             this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.inBedOne;
          } else{
             this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.offline;
          }
          // this.lifeRoomInfo.inBed =
          //   (res.result[0].inBed == null && this.bedDeviceId != undefined) ? (this.$t("m.roomGeneralViewManagement").offline) : 
          //  (res.result[0].inBed == null && this.bedDeviceId == undefined) ? "--" : 
          //  (res.result[0].inBed == 0) ? (this.$t("m.roomGeneralViewManagement").inBedZero) : 
          //  (res.result[0].inBed == 0 ? this.$t("m.roomGeneralViewManagement").inBedOne) : (this.$t("m.roomGeneralViewManagement").offline);
          this.lifeRoomInfo.heartbeat =
            res.result[0].heartbeat == -1 ||
            res.result[0].heartbeat == null ||
            res.result[0].heartbeat == 0
              ? "--"
              : res.result[0].heartbeat;
          this.lifeRoomInfo.breath =
            res.result[0].breath == -1 ||
            res.result[0].breath == null ||
            res.result[0].breath == 0
              ? "--"
              : res.result[0].breath;
        }
      });
    },

    /* 
      查询报警列表按钮
    */
    serachAlarmTable() {
      console.log(this.timeValueTable);
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      查询房间报警列表
    */
    queryDeviceAlertLifeRoom(roomId) {
      let params = new Object();
      params.roomId = roomId;
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      if (
        this.timeValueTable != "" &&
        this.timeValueTable != null &&
        this.timeValueTable != undefined
      ) {
        params.startQueryTime = this.timeValueTable[0] + " 00:00:00";
        params.endQueryTime = this.timeValueTable[1] + " 23:59:59";
      }
      console.log(this.rowAlartId, this.alertVideoFlag, "++++++++++--------");
      this.$postJson(
        this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoom,
        params,
        this.acceptLanguage
      ).then(res => {
        this.tableData = [];
        if (res.code == 200) {
          if (res.result.list != null) {
            this.pageSize = res.result.pageSize;
            this.currentPage = res.result.pageNum;
            this.totalDataNumber = res.result.total * 1;
            //by guo 2020-4-3-8:27修改
            res.result.list.forEach(item => {
              if (this.rowAlartId == item.alertId) {
                if (this.alertPlayFlag == true) {
                  item.videoPlayIconShow = true;
                }
              } else {
                item.videoPlayIconShow = false;
              }
            });
            this.tableData = res.result.list;
          } else {
            this.tableData = [];
            this.pageSize = 10;
            this.currentPage = 1;
            this.totalDataNumber = 0;
          }
        } else {
          this.tableData = [];
          this.pageSize = 10;
          this.currentPage = 1;
          this.totalDataNumber = 0;
        }
      });
    },

    /* 
      处理报警列表
    */
    updateAlert(alertId) {
      this.$postJson(
        this.ports.roomGeneralViewManagement.updateAlert + alertId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.queryDeviceAlertLifeRoom(this.roomId);
          //this.$message({message:res.message,type:'success'});
          this.$message({
            message: this.roomGeneralViewManagement.hasdealalarmSuccess,
            type: "success"
          }); //by guo 2020-3-18-12:11修改
          this.$bus.$emit("refreshalarmTitle"); //通知去刷新首页报警提示和房一览信息页面
        } else {
          this.queryDeviceAlertLifeRoom(this.roomId);
          // this.$message({message:res.message,type:'error'});
          this.$message({
            message: this.roomGeneralViewManagement.hasdealalarm,
            type: "error"
          }); //by guo 2020-3-18-12:11修改
        }
      });
    },
    videoSmBig() {
      var remoteVideoview = document.getElementById("remoteVideo");
      //isVideoSm
      if (remoteVideoview.requestFullscreen) {
        remoteVideoview.requestFullscreen();
      } else if (remoteVideoview.mozRequestFullScreen) {
        remoteVideoview.mozRequestFullScreen();
      } else if (remoteVideoview.webkitRequestFullScreen) {
        remoteVideoview.webkitRequestFullScreen();
      }
    },
    videoPlayPause() {
      var remoteVideoview = document.getElementById("remoteVideo");
      if (remoteVideoview.paused) {
        remoteVideoview.play();
        this.isVideoPlay = true;
      } else {
        remoteVideoview.pause();
        this.isVideoPlay = false;
      }
    },
    /* 
      生体详情
    */
    handleDetail() {
      console.log(this.bedDeviceId);
      if (
        this.bedDeviceId != "" &&
        this.bedDeviceId != null &&
        this.bedDeviceId != undefined
      ) {
        sessionStorage.setItem("bedDeviceId", this.bedDeviceId);
        sessionStorage.setItem("bedDeviceNo", this.bedDeviceNo);
        bus.$emit("homePage", {
          type: "jump",
          path: "/LifesignDetail",
          title: this.roomGeneralViewManagement.vitalSignsViewDetail
        });
      } else {
        this.$message({
          message: this.$t("m.roomGeneralViewManagement").unbindBed,
          type: "error"
        });
      }
    },
    
    /* 
      处理报警列表的报警类型
    */
    formatAlertType(row, column, cellValue) {
      switch (row.alertType) {
        case 0:
          return this.$t("m.roomGeneralViewManagement").alertTypeZero;
          break;
        case 1:
          return this.$t("m.roomGeneralViewManagement").alertTypeOne;
          break;
        case 2:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwo;
          break;
        case 3:
          return this.$t("m.roomGeneralViewManagement").alertTypeThree;
          break;
        case 4:
          return this.$t("m.roomGeneralViewManagement").alertTypeFour;
          break;
        case 5:
          return this.$t("m.roomGeneralViewManagement").alertTypeFive;
          break;
        case 6:
          return this.$t("m.roomGeneralViewManagement").alertTypeSix;
          break;
        case 7:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeven;
          break;
        case 8:
          return this.$t("m.roomGeneralViewManagement").alertTypeEigth;
          break;
        case 9:
          return this.$t("m.roomGeneralViewManagement").alertTypeNine;
          break;
        case 10:
          return this.$t("m.roomGeneralViewManagement").alertTypeTen;
          break;
        case 11:
          return this.$t("m.roomGeneralViewManagement").alertTypeEleven;
          break;
        case 12:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwelve;
          break;
        case 13:
          return this.$t("m.roomGeneralViewManagement").alertTypeThirteen;
          break;
        case 14:
          return this.$t("m.roomGeneralViewManagement").alertTypeFourteen;
          break;
        case 15:
          return this.$t("m.roomGeneralViewManagement").alertTypeFifteen;
          break;
        case 16:
          return this.$t("m.roomGeneralViewManagement").alertTypeSixteen;
          break;
        case 17:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeventeen;
          break;
        //by guo 2020-3-9-11:56注释  需求变更  呼吸和心跳又合并为1个
        // case 18:
        //   return this.$t("m.roomGeneralViewManagement").alertTypeEighteen;
        //   break;
        case 20:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwenty;
          break;
        case 21:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyone;
          break;
        case 22:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentytwo;
          break;
        case 23:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentythree;
          break;
        case 24:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyfour;
          break;
        case 27:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyseven;
          break;
      }
    },
    /* 
      初始页currentPage、初始每页数据数pagesize和数据data
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数
      this.PageSize = val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      当前页变化
    */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      //isHandle==0未处理的
      if (row.isHandle == 0 && row.alertId == this.alertId) {
        //#EBEEF5
        return "background-color: #F5F7FA;color:#3e4b53";
        // this.alertId=row.alertId;
      } else if (row.isHandle == 0) {
        //return "background-color: #efefef";
        return "background-color: #ffffff;color:#3e4b53";
      } else {
        //return "background-color: #f9f9f9";
        return "background-color: #bee1f4;color:#3e4b53";
      }
    },
    //设置模糊度
    initAlpha() {
      var alphaValue = 0;
      this.$postJson("omc/lifeAmbiguity/select", {}, this.acceptLanguage).then(
        res => {
          if (res.code == 200 && res.result.length != 0) {
            alphaValue = res.result[0].ambiguity;
            if (Number(alphaValue) == null) {
              alphaValue = 0;
            } else {
              alphaValue = Number(alphaValue);
            }
            this.filterBlur = "filter-blur" + alphaValue;
          }
        }
      );
    },
    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },
    /* 
      紧急确认
    */
    handleUrgencySure() {
      if (this.videoFlag && this.isLivePlay) {
        var remoteVideoview = document.getElementById("remoteVideo");
        if (remoteVideoview.paused) {
          remoteVideoview.play();
          this.isVideoPlay = true;
        } else {
          remoteVideoview.pause();
          this.isVideoPlay = false;
        }
      } else {
        // this.rowAlartId="";//by guo 清空点击的报警id
        this.rowAlartId = ""; //by guo 清空点击的报警id
        this.alertVideoFlag = false; //报警录像是否存在  false不存在
        if (this.alertPlayFlag && this.urgencySureFlag) {
          this.alertPlayFlag = false;
          this.urgencySureFlag = false;
        }
        if (this.urgencySureFlag == false) {
          this.$postForm(
            "dmc/camera/showByWebRTC",
            { deviceNo: this.deviceNo },
            this.acceptLanguage
          ).then(res => {
            if (res.code == 200) {
              this.cameraInfo = res.result;
              this.videoFlag = true; //点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
              this.alertPlayFlag = false;
              this.videoShowLoadding = true;
              this.isLivePlay = true; //实时视频播放
              this.urgencySureFlag = true; //by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
              setTimeout(()=>{
                this.initSkyRtc();
              },50);
            } else {
              this.$message({ message: res.message, type: "error" });
            }
          });
        } else {
          this.videoFlag = false; //点击了确认完成按钮  视频码流播放隐藏  静态图片显示
          this.urgencySureFlag = false; //by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
        }
      }
    },
    //视频
    initSkyRtc() {
      // this.cameraInfo
      console.log("============================");
      //用固定的 -- fzq 20210430
      // this.cameraInfo = {
      //   conmode: "play",
      //   consource: "camera-008_normal_20210601173531.MP4",
      //   host: "dev.51hjk.com:4439",
      //   toclientid:"SHJT-00-RLRM-H9PW-00000012"
      // }
      console.log(this.alertPlayFlag);
      console.log(this.isVideoPlay);
      
      console.log("============================");
      console.log(this.cameraInfo);
      this.connectmode = this.cameraInfo.conmode;
      this.connectsource = this.cameraInfo.consource;
      if(this.cameraInfo.conmode == 'play'){
        //2. 
        this.connectmode = this.cameraInfo.conmode;
        this.connectsource = this.cameraInfo.consource;
      }else{
        this.connectmode = "live";
        this.connectsource = "MainStream";
      }
      this.peerid = this.cameraInfo.toclientid;
      this.CheckedgetUserMedia = true;
      this.StartCalled = false;
      //3.首先下面返回else
      if(this.wsuri.indexOf(this.cameraInfo.host)!=-1 || this.websock!=null){
        this.sendDisconnect();
        this.handleLeave();
        // 5.上面返回true,新的sessionId和meid,然后用录像的进行ca
        setTimeout(() => {
          this.sessionId = this.newGuid();
          this.websocketonopen();
        },2000);
        return;
      }else{
        //4.初始化websocket,然后播放实时视频,然后再点击录像,
        this.sessionId = this.newGuid();
        this.meid = this.newGuid();
        this.initWebSocket();
      }
      var u = window.navigator.userAgent;
      if(u!=null){
        this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //ios终端
        this.isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        this.isChrome =u.indexOf("Chrome") !== -1 //Chrome 浏览器
        this.isWeixin = u.indexOf('micromessenger') != -1;  //微信浏览器
      }
      this.remoteVideo = document.getElementById("remoteVideo");
      console.log(this.remoteVideo);
      if(this.remoteVideo!= null){
        this.remoteVideo.addEventListener('playing', this.OnVideoPlaying);
        this.remoteVideo.addEventListener('play', this.OnVideoPlay);
        this.remoteVideo.addEventListener('loadedmetadata', this.OnVideoLoadedMetaData);
        this.remoteVideo.addEventListener('canplay', this.OnVideoCanPlay);
        this.remoteVideo.addEventListener('error', this.OnVideoError);
        this.remoteVideo.addEventListener('loadeddata', this.OnVideoLoadedData);
        this.remoteVideo.addEventListener("pause", function() {
            //暂停开始执行的函数
            console.log("暂停播放");
            this.isVideoPlay = false;
          });
        this.remoteVideo.addEventListener("play", function() {
            //暂停开始执行的函数
            console.log("继续播放");
            this.isVideoPlay = true;
          });
        this.remoteVideo.addEventListener("ended", function() {
            //暂停开始执行的函数
            console.log("暂停结束");
            this.isVideoPlay = false;
        });
        // if(this.isWeixin == true && this.isIos==false){
        //     console.log("Your browser Weixin  no ios");
				// }else if(this.isWeixin == true && this.isIos==true){
        //   console.log("Your browser Weixin addEventListener WeixinJSBridgeReady");
        //   document.addEventListener("WeixinJSBridgeReady", function () {
        //     var  playPromise  = this.remoteVideo.play();
        //     if (playPromise) {
        //              playPromise.then(() => {
        //              }).catch((e) => {
        //                     console.log("play.",e.message);
        //                     });
        //             }
        //             }, false);
        // }else{
        //     if(this.isChrome==true && this.isIos==false){
        //       console.log("Your browser isChrome  no ios");
        //     }else{
        //         console.log("Your browser isChrome   ios");
        //     }
        // }
      }
      this.timerstart();
    },
    timerreset(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
    },
    timerstart(){
        var that = this;
        this.serverTimeoutObj = setInterval(function(){
          that.timedelay++;
          if(that.websock!=null && that.websock && that.websock.readyState === 1){
            if(that.IsReconnect == true){
              if(that.RTCPeerConnectionCrea2ted == true){
                that.handleLeave();
              }
              that.StartCalled = false;
              that.sessionId = that.newGuid();
              that.Connect();
              }else{
                if(that.timedelay>30){
                  that.timedelay = 0;
                  that.sendToServer({
                    "eventName": "__ping",
                    "data": {
                      "sessionId": that.sessionId,
                       "sessionType": "IE",
                       "messageId": that.newGuid(),
                       "from": that.meid,
                       "to": that.peerid
                       }
                  });
                }
              }
              that.timerreset();
              that.timerstart();
            }else{
               if(that.IsWebSocketConnecting ==false){                 
                  if(that.websock!= null){
                        that.websock.close();
                        that.websock = null;
                  }
                  if(that.RTCPeerConnectionCreated == true){
                           that.handleLeave();
                  }
                  that.meid=that.newGuid();
                  that.initWebSocket();
                }else{
                  console.log("IsWebSocketConnecting  ------------------- ");
                }
            }
         }, this.timeout)
    },
    initWebSocket(){ 
       // var host = window.location.host;
        //const wsuri = 'wss://'+host+'/wswebclient/'+this.meid;
        // const wsuri = 'wss://webrtc.qq-kan.com/wswebclient/'+this.meid;
        // if(this.IsWebSocketConnecting == true){
        //   return;
        // }
        this.IsWebSocketConnecting = true;
        this.isVideoPlay = true;
        console.log(this.websock);
        if(this.websock!=null){
            console.log("initWebSocket close socket-------");
            this.websock.onmessage = null;
            this.websock.onopen = null;
            this.websock.onerror = null;
            this.websock.onclose = null;
            this.sendDisconnect();
            this.handleLeave();          
            this.websock.close();
            this.websock = null;
        }
        console.log(this.websock);
        console.log("init websocket");
        this.wsuri = 'wss://'+this.cameraInfo.host+'/wswebclient/'+this.meid;
        // this.wsuri = 'wss://webrtc.qq-kan.com/wswebclient/'+this.meid;
        // this.peerid = "RHZL-00-NYWB-4BNH-00000087";
        //this.sessionId = this.newGuid();
       // this.meid = this.newGuid();
        
        this.websock = new WebSocket(this.wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
    },
    websocketonopen(){ 
      var that = this;
      this.isVideoPlay = true;
      this.IsWebSocketOpened = true;	
        if (this.websock!=null && this.websock.readyState === 1) {
             this.StartCalled = false;
             this.Connect();
  
        }else{
              setTimeout(() => {
              if (that.websock!=null && that.websock.readyState === 1) {
                that.StartCalled = false;
                that.Connect();
              }
        }, 100);
      }
    },
    websocketonerror(){//连接建立失败重连
        this.IsWebSocketOpened = false;
        this.IsWebSocketConnecting = false;
        this.websock = null;
        
        this.initWebSocket();
    },
    websocketonmessage(e){ //数据接收
       console.log("websocketonmessage:", e.data);
        const data = JSON.parse(e.data);
        switch(data.eventName) {
						case "_create":
              this.handleCreate(data.data);
              break;
						case "_offer":
              this.handleOffer(data.data);
              break;
						case "_answer":
              this.handleAnswer(data.data);
              break;
						case "_ice_candidate":
              this.handleCandidate(data.data);
              break;
						case "_session_disconnected":
              this.handleDisconnect(data.data);
              break;
						case "_post_message":
              this.handlePostMessage(data.data);
              break;
						case "_connectinfo":
              this.handleConnectInfo(data.data);
              break;
            case "_session_failed":
              this.handleSessionFailed(data.data);
              break;
            case "_ping":
              break;
            default:
               console.log("Got default message", data);
              break;
        }
    },
    websocketsend(Data){//数据发送
      if(this.websock!= null && this.websock.readyState === 1){
        this.websock.send(Data);
      }
    },
    websocketclose(e){  //关闭
        this.IsWebSocketOpened = false;
        this.IsWebSocketConnecting = false;
        this.websock = null;
        this.handleLeave();
        console.log('断开连接',e);
    },
    NewgetUserMedia(constrains,success,error){//访问用户媒体设备的兼容方法
      console.log("NewgetUserMedia----------------");
      if(window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia){//最新标准API
      window.navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
      } else if (window.navigator.webkitGetUserMedia){//webkit内核浏览器
      window.navigator.webkitGetUserMedia(constrains).then(success).catch(error);
      } else if (window.navigator.mozGetUserMedia){//Firefox浏览器
      window.navagator.mozGetUserMedia(constrains).then(success).catch(error);
      } else if (window.navigator.getUserMedia){//旧版API
      window.navigator.getUserMedia(constrains).then(success).catch(error);
      }else if (window.navigator.msGetUserMedia){
      window.navigator.msGetUserMedia(constrains).then(success).catch(error);
      }else{
          this.CheckedgetUserMedia = true;
          this.IsLocalAudioTrack = false;				
          console.log("Your browser no getUserMedia function");
      }
    },
    Connect() {
        console.log("Connect Connect Connect");
        this.sendToServer({
          "eventName": "__connectto",
          "data": {
              "sessionId": this.sessionId,
              "sessionType": "IE",
              "messageId": this.newGuid(),
              "from": this.meid,
              "to": this.peerid
              }
            });
    },
    handleDisconnect(data) {
      if(data.sessionId == this.sessionId){
          console.log("handleDisconnect ", JSON.stringify(data));
          if(this.RTCPeerConnectionCreated == true){
            this.handleLeave();
            // disconnect
          }
      }
    },
    sendToServer(message) {
        console.log("sendToServer:", message);
        this.websocketsend(JSON.stringify(message));
    },
		PostMessage  (message,callback) {
        if(this.connected==true ){
          var messageid = this.newGuid();
          this.messagecallback=callback;
          this.sendToServer({
             "eventName": "__post_message",
             "data": {
               "sessionType": "IE",
               "messageId": messageid,
               "to": this.peerid,
                "from":this.meid,
                "message": message
                }
            });
          }
		},
		handlePostMessage(data){
      if(this.messagecallback===undefined  || this.messagecallback===null){
        console.log("handlePostMessage");
      }else{
        typeof(this.messagecallback)==='function'&&this.messagecallback(data.message);
        this.messagecallback = null;
      }  
		},
    handleSessionFailed(data){
        console.log("handleSessionFailed ",data);
        if(data.sessionId == this.sessionId){
          if(this.RTCPeerConnectionCreated == true){
              this.sendDisconnect();
              this.handleLeave();
             
          }         
         this.sessionId = this.newGuid();
        }
			},
      handleCreate(data) {
       // console.log("WebSocket _create", data);
         if (data.state === "online" || data.state === "sleep") {
            this.IsWebSocketCreateed = true;
             if (data.iceServers !== null || data.iceServers !== undefined || data.iceServers !== '') {
               //console.log("WebSocket iceServers", data.iceServers);
               //服务器把ICE 服务的信息下发到js创建RTCPeerConnection使用
               //configuration = JSON.parse(data.iceServers);
                if(data.iceServers.constructor === Object){
                  console.log(" _create  iceServers ---object ---- ", JSON.stringify(data.iceServers));
                  this.configuration = JSON.parse(JSON.stringify(data.iceServers));
                }else{
                  console.log(" _create  iceServers ---string ---- :", data.iceServers);
                  this.configuration = JSON.parse(data.iceServers);
                }
              }
              console.log("==========?? =========== StartCalled : "+this.StartCalled);
              if(this.StartCalled ==false){
                  console.log("handleCreate  start call");
                  this.Call();
							}else{
              }
          }else{
            this.videoFlag = false; //点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
            this.alertPlayFlag = false;
            this.isLivePlay = true; //实时视频播放
            this.isVideoPlay = false; //播放按钮待播放
            this.urgencySureFlag = true; //用于判断实时视频按钮的播放和切换  true--播放   false--停止
            console.log(" _create  offline  ",data.from); 
          }
			},
      Call() {
        //console.log("call");
        this.StartCalled = true;
        var audioenable = "sendrecv";
        var videoenable = "sendrecv";
        var datachannelenable = "true";
        if(this.IsLocalDataChannel == false){
          datachannelenable = "false";
        }
        if(this.IsLocalAudioTrack == false){
           audioenable = "recvonly";
        }
        if(this.IsLocalVideoTrack == false){
          videoenable = "recvonly";
        }
        console.log("call audio ",audioenable," video ",videoenable," datachannel",datachannelenable);
        this.sendToServer({
          "eventName": "__call",
           "data": {
             "sessionId": this.sessionId,
             "sessionType": "IE",
              "messageId": this.newGuid(),
              "from": this.meid,
              "to": this.peerid,
              "mode": this.connectmode,
              "source": this.connectsource,
              "datachannel": datachannelenable,
              "audio": audioenable,
              "video": videoenable,
              "user": "admin",
              "pwd": "123456",
              "iceservers": JSON.stringify(this.configuration)
              }
        });
      },
      handleConnectInfo(data){
          console.log("Got ConnectInfo Message:", data.message);
      },
      handleLeave(){
        var that = this;
        this.videoplayingArc = false;
        console.log('handleLeave  -------------------------------');
        if(this.myDataChannel!=null){
          this.myDataChannel.close();
          this.myDataChannel.onopen = null;
          this.myDataChannel.onclose = null;
          this.myDataChannel.onmessage = null;
          this.myDataChannel.onerror = null;       
          this.myDataChannel = null;
        }
        if(this.myPeerConnection!= null){
          console.log('handleLeave  --------signalingState = ',this.myPeerConnection.signalingState);
          if(this.myPeerConnection.signalingState=='closed'){
            // this.myPeerConnection.getSenders().forEach(sender => {
            //     console.log('removeTrack  ',sender);
            //     that.myPeerConnection.removeTrack(sender);
            // });                      
            this.myPeerConnection.close(); 
            this.handleRelease();
          }else{
            this.myPeerConnection.getSenders().forEach(sender => {
                console.log('removeTrack  ',sender);
                that.myPeerConnection.removeTrack(sender);
            });                      
            this.myPeerConnection.close();   
            setTimeout(() => {
                if(that.myPeerConnection!= null){
                   // if(that.myPeerConnection.signalingState=='closed'){
                      that.handleRelease();
                   // }
                }
              }, 100);
            }
          }
          // this.isLivePlay = false;
          // this.isVideoPlay = false;
          // this.showPlayLive = true;
          this.videoplaying = false;
          this.RTCPeerConnectionCreated = false;
          this.StartCalled = false;
          this.IceCandidate.splice(0,this.IceCandidate.length);
          // this.videoFlag = false; //点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
          // this.isLivePlay = false; //实时视频播放
          // this.urgencySureFlag = false; //by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
        },
        handleRelease(){
          console.log('handleRelease  ========================================================');
          if(this.myPeerConnection!= null){
             this.myPeerConnection.onicecandidate = null;
             this.myPeerConnection.onaddstream = null;
             this.myPeerConnection.ontrack = null;
             this.myPeerConnection.onsignalingstatechange = null;
             this.myPeerConnection.onicegatheringstatechange = null;            
             this.myPeerConnection = null;
          }
          this.IsReconnect = false; 
        },
        handleOffer(data) {
          var that = this;
          this.IsReconnect = false;
          console.log("Offer --- ---- sdp  :\n", data.sdp);
          if(this.RTCPeerConnectionCreated == false) {
            this.initPeerConnection();
          }
          if(this.RTCPeerConnectionCreated == false) {
            console.log("handleOffer Failed   RTCPeerConnectionCreated = ", this.RTCPeerConnectionCreated);
            that.sendDisconnect();
            this.IsReconnect = false;
          }
          try {
            that.myPeerConnection.setRemoteDescription(new RTCSessionDescription({type:'offer', sdp:data.sdp}));
            } catch (err) {
              console.log("Error when setRemoteDescription-----------------------------",err.message);
              that.sendDisconnect();
              this.IsReconnect = false;
            }
            that.myPeerConnection.createAnswer().then(function (answer) {
               that.myPeerConnection.setLocalDescription(answer);
               console.log("Answer sdp :\n" + answer.sdp);
                that.sendToServer({
                  "eventName": "__answer",
                  "data": {
                    "sessionId": that.sessionId,
                    "sessionType": "IE",
                    "messageId": that.newGuid(),
                    "from": that.meid,
                    "to": that.peerid,
                    "type": answer.type,
                    "sdp": answer.sdp
                    }
                    });
               }).catch(function (error) {
                 console.log("Error when create  Answer-----------------------------",error.message);
                 that.sendDisconnect();
                 that.IsReconnect = false;
                 });
      },
			sendDisconnect() {
        this.sendToServer({
          "eventName": "__disconnected",
          "data": {
            "sessionId": this.sessionId,
            "sessionType": "IE",
            "messageId": this.newGuid(),
            "from": this.meid,
            "to": this.peerid
            }
            });
      },
      handleCandidate(data) {
        var obj =JSON.parse(data.candidate);
        if(this.myPeerConnection!= null && this.RTCPeerConnectionCreated==true){
           console.log("candidate --- ----   :", obj.candidate);
           var candidate = new RTCIceCandidate({sdpMLineIndex:obj.sdpMLineIndex, candidate:obj.candidate});
           this.myPeerConnection.addIceCandidate(candidate);
        }else{
            this.IceCandidate.push(obj);
        }
      },
      initPeerConnection(){
        try {
          //console.log('initPeerConnection create PeerConnection configuration =',this.configuration);
            this.myPeerConnection = new RTCPeerConnection(this.configuration);
            if(this.myPeerConnection!=null){
              if ("addTrack" in this.myPeerConnection) {
                if(this.stream!= null){
                  this.stream.getTracks().forEach(track => {
                    this.myPeerConnection.addTrack(track, this.stream);
                      if(track.kind==='audio'){
                        track.enabled = this.mute;
                        }
                        });
               }else{
                          console.log('PeerConnection  addTrack  stream is null');
               }
              } else {
                if(this.stream!= null){
                     this.myPeerConnection.addStream(this.stream);
                     this.stream.getTracks().forEach(track => {
                       //console.log('PeerConnection use addStream type',track.kind);
                       if(track.kind==='audio'){
                         track.enabled = this.mute;
                         }
                         });
                    }else{
                      console.log('PeerConnection  addStream is null');
                      }
              }
              if ("ontrack" in this.myPeerConnection) {
                this.myPeerConnection.ontrack = this.handleRemoteTrackAdded;
              } else {
                  this.myPeerConnection.onaddstream = this.handleRemoteStreamAdded;
              }
              this.myPeerConnection.onicecandidate = this.handleIceCandidate;
              this.myPeerConnection.oniceconnectionstatechange = this.handleIceConnectionStateChangeEvent;
              this.myPeerConnection.onicegatheringstatechange = this.handleIceGatheringStateChangeEvent;
              this.myPeerConnection.onsignalingstatechange = this.handleSignalingStateChangeEvent;
              //myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
              // if(this.IsLocalDataChannel == true){
                  try {
                    this.myDataChannel = this.myPeerConnection.createDataChannel("mydatachannel");;
                    if(this.myDataChannel){
                      this.myDataChannel.onopen = this.handleDataChannelOnOpen;
                      this.myDataChannel.onclose = this.handleDataChannelOnClose;
                      this.myDataChannel.onmessage = this.handleDataChannelOnMessage;
                      this.myDataChannel.onerror = this.handleDataChannelOnError;
                    }
                } catch (error) {
                        console.log("data_channel_create_error  ");
                }
              // }
              console.log('Sucessed to create PeerConnection');
              this.RTCPeerConnectionCreated = true;
            }else{
              console.log('Failed to create PeerConnection');
              this.RTCPeerConnectionCreated = false;
            }
        }catch (e) {
          console.log('Failed to create PeerConnection, exception: ' + e.message);
          this.RTCPeerConnectionCreated = false;
          return;
          }
      },
			getObjectURL(stream) {
            var url = null ;
            try {
              if (window.createObjectURL!=undefined) {
                url = window.createObjectURL(stream);
                console.log("window createObjectURL",url);
                } else if (window.URL!=undefined) { 
                  url = window.URL.createObjectURL(stream);
                  console.log("window window.URLcreateObjectURL ",url);
                } else if (window.webkitURL!=undefined) {
                    url = window.webkitURL.createObjectURL(stream) ;
                    console.log("window.webkitURL.createObjectURL ",url);
                }
          } catch (error) {
              url = null;
          }
        return url ;
      },
      handleRemoteTrackAdded(e) {
        console.log("handleRemoteTrackAdded",e);
        if(this.remoteVideo!=null){
             // console.log("handleRemoteTrackAdded attachStream srcObject stream id = ",e.streams[0].id);
              e.streams[0].getTracks().forEach(track => {
                console.log('handleRemoteTrackAdded  type',track.kind);
                if(track.kind ==='audio'){
                  track.enabled = this.speak;
                  }
              });
              this.remoteVideo.srcObject = e.streams[0];
              if(this.IsSystemAudioDeviceOK==false){
                this.remoteVideo.muted = true;
              }
              
          }else{
                     console.log("handleRemoteTrackAdded  video view is null");
          }
      },
      handleRemoteStreamAdded(e) {
        if(this.remoteVideo!=null){
          if ("srcObject" in this.remoteVideo) {
           // console.log("handleRemoteStreamAdded attachStream srcObject stream id = ",e.stream.id);
            this.remoteVideo.srcObject =  e.stream;
            e.stream.getTracks().forEach(track => {
                //console.log('handleRemoteTrackAdded  type',track.kind);
                if(track.kind ==='audio'){
                  track.enabled = this.speak;
                  }
                });
            
          } else {
            var objUrl=  this.getObjectURL( e.stream);
            //console.log("handleRemoteStreamAdded attachStream getObjectURL stream id = ",e.stream.id);
            this.remoteVideo.src = objUrl;
            e.stream.getTracks().forEach(track => {
                //console.log('handleRemoteTrackAdded  type',track.kind);
                if(track.kind ==='audio'){
                  track.enabled = this.speak;
                  }
                });
            
            }
         }
      },
			handleIceCandidate(event) {
        if (event.candidate) {
          console.log('onicecandidate: ' + event.candidate.candidate);
          this.sendToServer({
            "eventName": "__ice_candidate",
            "data": {
              "sessionId": this.sessionId,
              "sessionType": "IE",
              "messageId": this.newGuid(),
              "to": this.peerid,
              "from": this.meid,
              "label": event.candidate.sdpMLineIndex,
              "candidate": event.candidate.candidate
              }
              });
              }
      },
      handleIceConnectionStateChangeEvent(event) {
        if(this.myPeerConnection == null){
           return;
        }
        console.log("*** ICE connection state changed to ",event);
        console.log("*** ICE connection state changed to " + this.myPeerConnection.iceConnectionState);
        switch(this.myPeerConnection.iceConnectionState) {
          case "closed":
            this.handleRelease();     
          case "failed":
          case "disconnected":
            if(this.RTCPeerConnectionCreated == true){
                 this.sendDisconnect();
                 this.handleLeave();
                 
            }
          break;
          case "connected":
            this.videoplay();
            break;
          }
      },
      handleIceGatheringStateChangeEvent(event) {
        if(this.myPeerConnection == null){
          return;
        }
        if(event.target == this.myPeerConnection){
            console.log("*** ICE gathering state changed to: " + event.target.iceGatheringState);
            
        }
          console.log("*** handleIceGatheringStateChangeEvent ",event);
          console.log("*** ICE gathering state changed to: " + this.myPeerConnection.iceGatheringState);
      },
      handleSignalingStateChangeEvent(event) {
        if(this.myPeerConnection == null){
              return;
        }
        if(event.target == this.myPeerConnection){
          console.log("*** WebRTC signaling state changed to: " + event.target.signalingState);
          switch(this.myPeerConnection.signalingState) {
            case "stable":
                   this.videoplay();
                 break;
            case "closed":              
                   this.handleRelease(); 
              break;
              }
        }
      },
      sendDatachennelMessage(message) {
        if(this.myDataChannel!= null){
            this.myDataChannel.send(JSON.stringify(message));
        }
      },
      handleDataChannelOnOpen() {
        // this.sendDatachennelMessage({
        //     "eventName": "__play",
        //     "data": {
        //       "sessionId": this.sessionId,
        //       "sessionType": "IE",
        //       "messageId": this.newGuid(),
        //       "to": this.peerid,
        //       "from": this.meid,
        //       "message": JSON.stringify({'cmd':'open',
        //       'file':this.connectsource})
        //       }
        // });
      },
      handleDataChannelOnClose(event) {
        console.log('handleDataChannelOnClose ',event);
      },
      handleDataChannelOnMessage(message) {
        console.log('handleDataChannelOnMessage ',message);
        console.log('----------- ',message);
        var json;
        json = JSON.parse(message.data);
         if (json.type === '__file') {
          // 文件下载
           console.log('handleDataChannelOnClose recive message data',json.data);
           //base64 
           //inputString
          }else if (json.type === '__msg') {
            if(json.data == "play video end"){
                 this.isLivePlay = false;
                 this.isVideoPlay = false;
                 this.showPlayLive = true;
                //  this.sendDisconnect();
                //  this.handleLeave();
            }
            console.log('handleDataChannelOnClose recive message data',json.data);
          } else {
            console.log('handleDataChannelOnClose recive message data',json.data);
          }
      },
      handleDataChannelOnError(err) {
        console.log('handleDataChannelOnError ',err);
      },
      close() {
				if (this.socketTask && this.socketTask.close) {
					this.socketTask.close()
				}
			},
      newGuid() {
                let s4 = function() {
                    return (65536 * (1 + Math.random()) | 0).toString(16).substring(1);
                }
                return (s4() + s4() + "-" + s4() + "-4" + s4().substr(0, 3) + "-" + s4() + "-" + s4() + s4() + s4()).toUpperCase();
       },
      streamHandler(mystream) {
         this.CheckedgetUserMedia = true;
         window.localStream  = mystream;
         this.stream = mystream;
         console.log("streamHandler");
         if ("getTracks" in mystream) {
           //console.log('streamHandler getTracks');
           if(mystream!= null){
              mystream.getTracks().forEach(track => {
                //console.log('streamHandler getTracks type',track.kind);
                if(track.kind==="audio"){
                  this.IsLocalAudioTrack = true;
                  }else if(track.kind==="video"){
                    this.IsLocalVideoTrack = true;
                    }
               });
             }
          }
          if(this.StartCalled == false && this.IsWebSocketCreateed == true){
            console.log("streamHandler  start call");
            this.Call();
            this.videoFlag = true;
          }
      },
      errorHandler(error) {
        this.CheckedgetUserMedia = true;
        console.log("errorHandler",error);
      },
      videoplay(){
        console.log('videoplay  -------------************-----');
        var that = this;
        if(this.remoteVideo==null){
          this.remoteVideo = document.getElementById("remoteVideo");
        }
        if(this.videoFlag && this.videoplaying == false){
          this.videoplaying = true;
          this.videoplayingArc = true;
          console.log('this.remoteVideo.play');
          this.remoteVideo.play().then(() => {
              that.videoplaying = true;
              console.log("<video>  play");
              that.isVideoPlay = true;
            }).catch((e) => {
                that.videoplaying = false;
                console.log("<video> play error",e.message);
            });
          
        }
      },
      //用于当视频开始播放的时候。把进度条等等做隐藏
      OnVideoPlaying() {
        console.log("stream is playing-------------");
        this.isVideoPlay = true;
        this.videoShowLoadding = false;
        
      },
      OnVideoPlay() {
         console.log("<video> event OnVideoPlay------");
      },
      OnVideoLoadedMetaData() {
        console.log("<video> event OnVideoLoadedMetaData----------------");
        // this.videoplay();
      },
      OnVideoCanPlay() {
        if(this.remoteVideo!=null){
          console.log("<video>  OnVideoCanPlay-----videoWidth = ",this.remoteVideo.videoWidth);
          console.log("<video>  OnVideoCanPlay-----videoHeight = ",this.remoteVideo.videoHeight);
        }
              // console.log("<documentElement>  OnVideoCanPlay------clientWidth = ",document.documentElement.clientWidth);
              // console.log("<documentElement>  OnVideoCanPlay------clientHeight = ",document.documentElement.clientHeight);
              // var canvas = document.getElementById('canvas');
              // canvas.style.width= this.remoteVideo.videoWidth;
              // canvas.style.height= this.remoteVideo.videoHeight;
              //  var temheight = document.documentElement.clientWidth*this.remoteVideo.videoHeight/this.remoteVideo.videoWidth;
              //  if(temheight>document.documentElement.clientHeight){
              //    if(this.isIos){
              //           //Videos.style.height= Math.floor(document.documentElement.clientWidth*this.remoteVideo.videoHeight/this.remoteVideo.videoWidth)+"px";
              //      }else{
              //           //Videos.style.height= Math.floor(document.documentElement.clientHeight)+"px";
              //      }
              //   }else{
              //           // Videos.style.height= Math.floor(document.documentElement.clientWidth*this.remoteVideo.videoHeight/this.remoteVideo.videoWidth)+"px";
              //  }
              //   console.log("<video>----------------height ",Videos.style.height);
              //  if(this.remoteVideo.muted == true){
              //    console.log("<video>----------------muted = true");
              //  }else{
              //    console.log("<video>----------------muted = false");
              //  }
     },
      OnVideoError() {
         console.log("<video> event OnVideoError----------------");
      },
      OnVideoLoadedData(){
         console.log("<video> event OnVideoLoadedData----------------");
      }
  },
  computed: {
    player() {
      console.log(this.videoFlag, "------");
      if (this.videoFlag == true) {
        return this.$refs.videoPlayer.player;
      } else {
        return this.$refs.videoPlayer.pause;
      }
    }
  },
  created() {
    this.groupId = sessionStorage.getItem("groupId");
    this.roomId = sessionStorage.getItem("lifeRoomDetail_roomId");
    this.queryDevice(this.roomId);
    this.queryDeviceAlertLifeRoom(this.roomId);
    this.queryRoomAlartStatus(this.roomId);
  },
  mounted() {
    this.initAlpha();
    this.$bus.$on("changeLifeAlarm_websocket", () => {
      console.log("接收到新的报警信息，刷新-------房间一览详情");
      this.queryDeviceAlertLifeRoom(this.roomId);
      this.queryLifeRoomInfo(this.roomId);
    });
    this.$bus.$on("changeLifeAlarm_room", data => {
      var alertBean=JSON.parse(data);
      //location
      if(alertBean.alert.length!=0){
        if(alertBean.alert[0].location == this.lifeRoomInfo.roomNo){
          this.queryDeviceAlertLifeRoom(this.roomId);
          this.queryLifeRoomInfo(this.roomId);
        }
      }
    });
    if (sessionStorage.getItem("language") == "ja_JP") {
      this.languageClass = true;
    } else {
      this.languageClass = false;
    }
  },
  destroyed() {
    this.$bus.$off("changeLifeAlarm_websocket");
    this.$bus.$off("changeLifeAlarm_room");
    console.log('----------destory webrtc web window');
    window.onresize = null;
    if(this.websock!= null){
       console.log('----------destory sendDisconnect');
       this.sendDisconnect();
       this.handleLeave();   
      this.websock.close(); 
      this.websock = null;
    }
    this.timerreset();
    if (this.conn != null) {
      this.conn.close();
    }
    if(this.client != null && this.client != ""){
      this.client.end(); //断开mqtt的连接  组件销毁后需要断开mqtt的连接 否则后端就会一直推送消息影响性能
    }
  },
  components: {
    KtButton,
    videoPlayer
  }
};
</script>
<style lang="scss" scoped>
.roomGeneralViewDetail {
  overflow-x: hidden;
  padding-bottom: 30px;
  .height40 {
    height: 44px;
    line-height: 44px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .height50 {
    height: 35px;
    line-height: 30px;
    .height50-itemName {
      color: #999999;
    }
  }
  .startTimeSecond {
    width: 100px;
  }
  .moHu {
    position: relative;
  }
  #videoSmBig {
    position: absolute;
    z-index: 10;
    bottom: 24px;
    margin-left: 100%;
    right: 7px;
    color: white;
    height: 50px;
    font-size: 30px;
  }
  #videoPlayPause {
    position: absolute;
    z-index: 10;
    bottom: 25px;
    left: 5px;
    color: white;
    height: 50px;
    caret-color: rgba(0, 0, 0, 0);
    font-size: 32px;
  }
  
  #pixi {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .roomGeneralViewDetail-c {
    // width: 50%;
    width: 68%; //by guo 2020-3-9-13:58修改
    max-height: 350px;
    margin: 10px 0;
    // overflow-y: auto;
  }
  .roomGeneralViewDetail-d {
    width: 50%;
    margin-top: 20px;
  }
  .roomGeneralViewDetail-e {
    width: 50%;
    margin: 0;
  }
  .roomGeneralViewDetail-f {
    margin: 30px 0 5px;
  }
  .btn0 {
    background: #dddddd;
    color: #000000;
  }
  .btn1 {
    background: #409efe;
    color: #ffffff;
  }
  .btn2 {
    background: #fe0000;
    color: #ffffff;
  }
}
/* 定义keyframe动画，命名为blink */
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 定义blink类*/
.blink {
  color: #dd4814;
  animation: blink 1s linear infinite;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  -ms-animation: blink 1s linear infinite;
  -o-animation: blink 1s linear infinite;
}
/deep/ .vjs_video_817-dimensions {
  width: 600px !important;
  height: 420px !important;
}
/deep/ .roomGeneralViewDetail-c .el-pagination__total {
  margin-right: 0px !important;
}
/deep/ .roomGeneralViewDetail-c .el-pagination__jump {
  margin-left: 0px !important;
}
.remotevideo {
  margin: 0 auto;
  width: 100%;
  min-height: 420px;
  height: 420px;
  object-fit: fill;
  position: relative;
  background: #000000;
}
.filter-blur7 {
  filter: blur(7px) grayscale(100%) opacity(50%);
}
.filter-blur6 {
  filter: blur(6px) grayscale(100%);
}
.filter-blur5 {
  filter: blur(5px) grayscale(100%);
}
.filter-blur4 {
  filter: blur(4px) grayscale(100%);
}
.filter-blur3 {
  filter: blur(3px) grayscale(100%) contrast(150%);
}
.filter-blur2 {
  filter: blur(2px) grayscale(100%) contrast(150%);
}
.filter-blur1 {
  filter: blur(1px) grayscale(100%);
}
.filter-blur0 {
  filter: blur(0px);
}
.Ckplayer {
  margin: 0 auto;
  width: 100%;
  height: 420px;
  position: relative;
}
#video {
  width: 100%;
  height: 420px;
}

.arc {
  --width: 100%;
  --height: 100%;
  position: absolute;
  margin: auto;
  left: calc(var(--width)/2 - 25px);
  top:  calc(var(--height)/2 - 25px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 2px solid #ffea29;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  animation: rt 2s infinite linear;
  -webkit-animation: rt 2s infinite linear;
  transform: rotate(-360deg);
}
.arc::before {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border-top: 2px solid #8d29ff;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  animation: rt 3s infinite linear reverse;
  -webkit-animation: rt 3s infinite linear reverse;
  content: "";
}
.arc::after {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  border-top: initial;
  border-left: initial;
  border-right: initial;
  animation: rt 1s infinite;
  -webkit-animation: rt 1s infinite;
  content: "";
  background:  snow;
}

@-webkit-keyframes rt {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rt {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media (min-width: 1024px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 90%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 90%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1100px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 90%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 100%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1366px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 75%;
      font-size: 16px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 100%;
      font-size: 16px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1440px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 70%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 100%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1600px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 65%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 92%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1680px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 65%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 92%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1920px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 50%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 73%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 2100px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 47%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 65%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
</style>